<template>
  <div class="trashes-index">
    <!-- 列表头 -->
    <div class="list-header">
      <div>
        <span style="padding-left:36px">名称</span>
      </div>
      <div>类型</div>
      <div>大小</div>
      <div>删除时间</div>
      <div>操作</div>
    </div>
    <!-- 文件列表 -->
    <div class="file-list">
      <!-- 文件 -->
      <div v-for="(item, index) in fileList" :key="index" class="file-item">
        <div class="name">
          <a-icon type="file"></a-icon>
          <a-tooltip :title="item.fileName" :mouseEnterDelay="0.3">
            <span>{{ item.fileName }}</span>
          </a-tooltip>
        </div>
        <div class="type">文件</div>
        <div class="size">--</div>
        <div class="time">{{ item.createTime.slice(0, 19) }}</div>
        <div class="buttons">
          <!-- <a-button
            type="danger"
            icon="delete"
            :size="'small'"
            @click="deleteButtonClick(item.fileId)"
          >
            删除
          </a-button> -->
          <a-button
            class="rollback-button"
            type="primary"
            icon="rollback"
            :size="'small'"
            @click="rollbackButtonClick(item.fileId)"
          >
            恢复
          </a-button>
        </div>
      </div>
      <!-- 如果为空 -->
      <div v-if="!fileList.length" class="list-empty">
        暂无
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    // 恢复
    rollbackButtonClick(fileId) {
      this.$api.trashes.recoverFile(fileId).then((res) => {
        this.$message.success('恢复文件成功')
        this.getTrashList()
      })
    },
    // 删除
    // deleteButtonClick(fileId) {
    //   this.$api.trashes.mydeleteFile(fileId).then((res) => {
    //     this.$message.success('已彻底删除')
    //     this.getTrashList()
    //   })
    // },
    // 获取列表
    getTrashList() {
      this.$api.trashes.getTrashesFile().then((res) => {
        this.fileList = res.data || []
      })
    }
  },
  mounted() {
    this.getTrashList()
  }
}
</script>
<style lang="less" scoped>
.trashes-index {
  height: 100%;
  // 列表头
  .list-header {
    padding: 0 24px;
    box-shadow: 0 0 10px -5px #666;
    height: 48px;
    display: flex;
    align-items: center;
    > div {
      flex: 1;
      &:first-child {
        padding-left: 24px;
      }
    }
  }
  // 文件列表
  .file-list {
    height: calc(~'100% - 120px');
    overflow: auto;
    margin-top: 12px;
    padding: 24px 24px;
    box-shadow: 0 0 10px -5px #666;
    .file-item {
      display: flex;
      align-items: center;
      height: 40px;
      user-select: none;
      border-bottom: 1px dotted #ccc;
      transition: background 0.5s;
      &:hover {
        background-color: fade(@primary-color, 10%);
      }
      > div {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .name {
        padding-left: 24px;
        .anticon {
          margin-right: 12px;
          font-size: 24px;
        }
      }
    }
    .list-empty {
      text-align: center;
      color: #ccc;
      font-weight: bold;
      font-size: 48px;
      padding: 48px 0;
    }
  }
  //按钮
  .rollback-button {
    // margin-left: 20px;
  }
}
</style>
